<template>
  <div class="app-container" v-loading="loading">

    <!--    <top-car-info v-model="detailForm"/>-->

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="保险详情" name="bxxq">
        <!--车辆信息-->
        <car-info v-model="detailForm"/>
        <!--交强险信息 -->
        <compulsoryTrafficTnsurance v-model="detailForm"/>
        <!--商业险信息 -->
        <commerciaInsurance v-model="detailForm"/>
        <!--其他保险 -->
        <other v-model="detailForm"/>
        <!--退保信息 -->
        <refundInfo v-model="detailForm" :state="isEdit" v-if="$route.query.insuranceType == 2"/>

      </el-tab-pane>
      <el-tab-pane label="保险记录" name="bxjl">
        <!--保险记录-->
        <insuranceMessage :carId="detailForm.carId" @handleTab="handleTab" ref="refInsuranceMessage"/>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
import {getInsuranceDetailss} from "@/api/bxgl/insureManageApi.js";
import {getInsuranceSelectList} from "@/api/cwgd/insuranceSelect";

export default {
  dicts: ["business_type"],
  name: "InsureManageDetails",
  components: {
    topCarInfo: () => import('./components/topCarInfo.vue'),//车辆详情
    carInfo: () => import('./components/carInfo.vue'),//车辆信息
    compulsoryTrafficTnsurance: () => import('./components/compulsoryTrafficTnsurance.vue'),//交强险信息
    commerciaInsurance: () => import('./components/commerciaInsurance.vue'),//商业险信息
    other: () => import('./components/other.vue'),//其他保险
    refundInfo: () => import('./components/refundInfo.vue'),//退保信息

    insuranceMessage: () => import('./components/insuranceMessage.vue')//退保记录


  },
  data() {
    return {
      detailForm: {
        insuranceVo: {}
      }, // 表单参数
      optionsData: [],//保险公司及
      loading: false,
      activeName: 'bxxq'
    };
  },
  watch: {},
  computed: {
    isEdit() {
      if (this.$route.query.type === "edit") {
        return "write";
      }
      if (this.$route.query.type === "view") {
        return "readonly";
      }
    },
  },
  created() {

    this.handleOptionsList()
    this.handleDetails()
  },
  mounted() {
  },
  methods: {
    //tabs切换
    handleClick(tab, event) {
      if (tab.name === "bxjl") {
        this.$refs.refInsuranceMessage.handleList()
      }
    },

    async handleTab(row) {
      this.activeName = 'bxxq'
      this.loading = true
      let obj = {
        id: row.insuranceCode,
        carId: row.carId,
      }
      try {
        const res = await getInsuranceDetailss(obj)

        this.detailForm = {...res.data}
        this.$set(this.detailForm, 'insuranceVo', res.data)
      } catch (e) {
        console.error('获取详情失败', e);
      } finally {
        this.loading = false
      }
    },

    //获取详情
    async handleDetails() {
      this.loading = true
      let obj = {
        id: this.$route.query.id,
        carId: this.$route.query.carId,
      }
      try {
        const res = await getInsuranceDetailss(obj)

        this.detailForm = {...res.data}
        this.$set(this.detailForm, 'insuranceVo', res.data)
      } catch (e) {
        console.error('获取详情失败', e);
      } finally {
        this.loading = false
      }
    },

    //保险公司
    handleOptionsList() {
      getInsuranceSelectList({businessTypeCode: "5"}).then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>

</style>
